<template>
    <div> 
        <meta-header :metaInfo="{ title: '权限管理' }"></meta-header>
        <div class="head">
          <n-button type="info" @click="showAdd()" v-if="!isModalComponent"> 添加 </n-button>
          <label v-if="!isModalComponent">
            <n-input v-model:value="search.name" @keydown.enter="searchData()" clearable />
            <n-button type="info" @click="searchData()" > 搜索 </n-button>
          </label>
        </div>

        <n-space class="table-data-space" vertical>
          <n-spin :show="tableLoading">
          <n-table striped :single-line="false">
            <!-- <colgroup>
                <col width="20px" style="background-color:red;"/>
                <col/>
                <col />
                <col />
                <col />
                <col v-if="!isModalComponent"/>
            </colgroup> -->
            <thead>
              <tr>
                <th>
                  <n-checkbox v-model:checked="tableAll" :indeterminate="tableIndeterminate"
                    @click.stop="toggleCkeckAll()"  />
                </th>
                <th>Id</th>
                <th>代码</th>
                <th>父级代码</th>
                <th>描述</th>
                <th>创建时间</th>
                <th v-if="!isModalComponent">操作</th>
              </tr>
            </thead>
            
            <tbody>
                <tr v-for="row,index in datas" :key="index">
                  <td>
                    <n-checkbox v-model:checked="tableCheckList[index]" />
                  </td>
                  <td> {{row.id}} </td>
                  <td> {{row.code}} </td>
                  <td> {{row.pcode}} </td>
                  <td> {{row.description}} </td>
                  <td> {{parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}')}} </td>
                  <td v-if="!isModalComponent"> 
                    <n-button strong secondary type="info"  @click="showEdit(row)" size="small">编辑</n-button>
                    <n-button strong secondary type="error" @click="deleteVo(row)" size="small">删除</n-button>  
                  </td>
                </tr>
            </tbody>
          </n-table>

          <n-pagination
            v-if="tablePage.total > tablePage.size"
            v-model:page="tablePage.page"
            v-model:page-size="tablePage.size"
            :item-count="tablePage.total"

            :mask-closable="false"
            show-size-picker
            :page-slot="5"
            :page-sizes="pageSizeOption"
            :on-update:page="pageChange"
            :on-update:page-size="pageSizeChange"
          />
          </n-spin>
        </n-space>

        <n-modal v-model:show="showModal" preset="dialog" title="Dialog" :mask-closable="false">
          <template #header>
            <div> {{isEdit ? '编辑' : '添加' }} </div>
          </template>
          <div>
              <n-form ref="dialogForm" :model="dialogForm" :rules="rules">
                  <n-form-item path="id" label="ID" v-if="isEdit" placeholder="别动它">
                    <!-- id 是 number 会有警告 -->
                    <n-input type="text"  v-model:value="dialogForm.id" disabled />
                  </n-form-item>
                  <n-form-item path="code" label="权限代码">
                    <n-input type="text"  v-model:value="dialogForm.code" placeholder="请输入权限代码" />
                  </n-form-item>
                  <n-form-item path="description" label="描述">
                    <n-input type="text"  v-model:value="dialogForm.description" placeholder="简单说明"/>
                  </n-form-item>
                  <n-form-item path="pcode" label="父级代码">
                    <!-- <n-input type="text"  v-model:value="dialogForm.pid" placeholder="父级代码"/> -->
                    <n-select v-model:value="dialogForm.pid" filterable
                      placeholder="父级代码" :options="parent.options" :loading="parent.loading"
                      clearable remote clear-filter-after-select="false"
                      @search="handleSearchParent"  />
                  </n-form-item>
                  <n-form-item path="createTime" label="添加时间">
                    <n-input type="text"  v-model:value="dialogForm.createTime" disabled placeholder="woc！是黑户" />
                    <!-- <n-date-picker v-model:value="dialogForm.createTime"
                          value-format="yyyy.MM.dd HH:mm:ss" type="datetime"
                        disabled clearable /> -->
                  </n-form-item>
              </n-form>
          </div>
          <template #action>
            <n-button type="primary" v-if="!isEdit" @click="saveVo()" :disabled="dialogFormSaving"> 添加 </n-button>
            <n-button type="primary" v-else @click="updateVo()" :disabled="dialogFormSaving"> 更新 </n-button>
            <n-button type="warning" @click="close()" :disabled="dialogFormSaving"> 取消 </n-button>
          </template>
        </n-modal>
    </div>
</template>

<script src="./permission.js">
</script>

<style lang="scss" scoped>
@import '/src/assets/css/manage.scss';
</style>